<template>
	<view class="visitor_card" @click="clickVisitorCard()" >
		<view class="icon">
			<view class="">
				<image class="image" v-if="myInfo.visitor_avatar.length !== 0"  :src="myInfo.visitor_avatar" mode=""></image>
				<image class="image" v-else src="@/static/images/index/avatar.png" mode=""></image>
			</view>
		</view>
		<view class="">
			<view class="details">
				<view class="name">{{myInfo.visitor_name||'-'}}</view>
				<view class="time">{{myInfo.visitor_start_time | timeFormat('YYYY-MM-DD HH:mm')}}</view>
			</view>
			<view class="details">
				<view class="tag">来访事由</view>
				<view class="reason"> {{myInfo.visitor_reason||'-'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "VisitorCard",
		props: {
			myInfo: Object,
		},
			
		data(){
			return{
			}
		},
		methods:{
			clickVisitorCard(){
				this.$emit('clickVisitorCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.visitor_card {
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 10px 40rpx 4px 40rpx;
		margin-top: 5px;
	
		.icon {
			width: 140rpx;
			box-sizing: border-box;
			text-align: center;
			margin-right: 20rpx;
	
			.image {
				margin-top: 16rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
			}
		}
	
		.details {
			margin-top: 20rpx;
			display: flex;
			font-size: 28rpx;
			color: #394954;
			margin-bottom: 40rpx;
				
			.name{
				font-size: 28rpx;
				width: 280rpx;
				color: #457AFF;
				overflow:hidden;
				
				text-overflow:ellipsis;
				
				white-space:nowrap;
			}
			.time{
				font-size: 24rpx;
				color: #999999;
			}
			.tag {
				flex-shrink:0;
				margin-right: 30rpx;
				color: #999999;
			}
			.reason{
				width: 300rpx;
				color: #394954;
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
			}
		}

	}
</style>
